<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>babel-standalone example</title>
</head>
<body>
  Input:
  <textarea id="input" style="width: 100%" rows="10">
const getMessage = () => 'Hello World';
const someDiv = <div>{getMessage()}</div>;
</textarea>

  Transformed code using Babel <strong id="version"></strong>:
  <pre id="output">Loading...</pre>

  <script src="../babel.js"></script>
  <script>
    console.log('Babel =', Babel);
    document.getElementById('version').innerHTML = Babel.version;
    var inputEl = document.getElementById('input');
    var outputEl = document.getElementById('output');

    function transform() {
      try {
        outputEl.innerHTML = Babel.transform(inputEl.value, {
          presets: ['es2015', 'react', 'stage-0']
        }).code;
      } catch (ex) {
        outputEl.innerHTML = 'ERROR: ' + ex.message;
      }
    }

    inputEl.addEventListener('keyup', transform, false);
    transform();
  </script>
</body>
</html>
